import { Extension, mergeAttributes, Node } from "@tiptap/core";
import { Plugin, PluginKey } from "@tiptap/pm/state";
import { DecorationSet,Decoration } from "@tiptap/pm/view";

const Break = Extension.create({
  name: "break-demo",
  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey("pm-break-demo"),
        props: {
          handleClick(view, pos, event) {
            console.log("自定义 pm 插件 点击", view, pos, event);
            // view.dispatch(view.state.tr.insert(pos,'\n'))
          },
          decorations(state) {
            console.log("自定义 pm 插件 decorations", state);
            console.log(
              "自定义 pm 插件 decorations state",
              this.getState(state)
            ); // undefined
            const cache =
              this.getState(state)?.decorationsMap || DecorationSet.empty;
            return this.getState(state)
          },
        },
        state: {
          init(config, instance) {
            // return {
            //   breakCount: 0,
            //   decorationsMap: DecorationSet.empty,
            // };
            //  上面写法好像不行，只能下面的
            return DecorationSet.empty
          },
          apply(tr, pluginState, oldState, newState) {
            console.log("自定义 pm 插件 应用 tr", tr);
            console.log("自定义 pm 插件 应用 value", pluginState);
            console.log("自定义 pm 插件 应用 oldState", oldState);
            console.log("自定义 pm 插件 应用 newState", newState);
            console.log("自定义 pm 插件 应用 this", this);
            // console.log('自定义 pm 插件 应用 this getState',this.getState(oldState))  // undefined
            // return DecorationSet.create(newState,[])
            // if (newState && pluginState) {
            //   let decorationsMap = pluginState.decorationsMap.map(
            //     tr.mapping,
            //     newState.doc
            //   );
            // }

            const decorations = [];
            tr.doc.descendants((node, pos) => {
              console.log("自定义 pm 插件 应用 遍历节点", node, pos);
              if (node.isText) {
                const text = node.text;
                for (let i = 0; i < text.length; i++) {
                //   decorations.push(
                //     Decoration.inline(pos + i, pos + i + 1, {
                //       style: 'background: red; color: white;',
                //     })
                //   )
                    if((i%10)===0){
                        // decorations.push(
                        //     Decoration.inline(pos + i, pos + i + 1, {
                        //         style: 'background: green; color: white;',
                        //     })
                        // )
                        decorations.push(
                            Decoration.widget(pos + i, (view,getPos)=>{
                                const div = document.createElement('div')
                                div.style.backgroundColor = 'green'
                                div.style.color = 'white'
                                div.style.width = '10px'
                                div.style.height = '20px'
                                return div
                            })
                        )
                    }
                }
              }
            });
            console.log('自定义 pm 插件 应用 遍历节点 decorations', decorations)
            const decorationsMap = DecorationSet.create(tr.doc, decorations);
            return decorationsMap
            // 下面的写法好像不行，只能返回这样的
            // return {
            //   breakCount: 0,
            //   decorationsMap,
            // };
          },
        },
      }),
    ];
  },
});
export default Break;
